<!--  -->
<template>
  <div class='' style="padding:20px">
    <div style="margin-bottom:30px">
      <span>课程方向</span>
      <el-select v-model="courseType" placeholder=""  style="margin-right:20px" clearable>
        <el-option v-for="opt in courseList" :key="opt.id" :label="opt.label" :value="opt.id" />
      </el-select>
      <span>排序</span> 
      <el-select v-model="orderType" placeholder=""  style="margin-right:20px" clearable>
        <el-option label="课程开设时间" value="start_time"></el-option>
        <el-option label="课程名称" value="course_name"></el-option>
      </el-select>
      <el-button type="primary" @click="getPage">查询</el-button>
      <el-button type="" @click="clearContent">重置</el-button>
    </div>
    <CommonPic :list='dataList' @clickDetail='getDetail'></CommonPic>
    <el-pagination class="pageBar" background @size-change="sizeChange" @current-change="currentChange" :current-page="pageInfo.currentPage" :page-sizes="[2, 5,10, 20, 30]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRecordCount">
    </el-pagination>
  </div>
</template>

<script>
import teacherApi from "../api/teacher.service.js";
import operateApi from "../api/operate.service.js";
export default {
  components: {},
  data() {
    return {
      courseType: "",
      orderType: "",
      courseList: [],
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
      },
      totalRecordCount: "",
      dataList: [],
      host: window.location.href.split("/#/")[0] + "/api",
      originPath: "",
    };
  },
  mounted() {
    this.getCourseMenu();
    this.getPage();
    this.originPath = this.$route.query.originPath;
  },
  computed: {},
  watch: {},
  methods: {
    async getCourseMenu() {
      let { data } = await teacherApi.getCourseMenu();
      let list = [];
      for (let i in data) {
        list.push({ label: data[i], id: i });
      }
      this.courseList = list;
    },
    async getPage() {
      let { data } = await teacherApi.couserMangeHome({
        courseType: this.courseType,
        orderType: this.orderType,
        ...this.pageInfo,
        courseStatus: "",
      });
      this.dataList = data.records;
      this.totalRecordCount = data.totalRecordCount;
    },
    // 重置
    clearContent() {
      this.courseType = "";
      this.orderType = "";
      this.getPage();
    },
    // 获取详情
    async getDetail(data) {
      this.$router.push({
        path: "/courseDetail",
        query: {
          id: data.id,
          originPath: "/exper/views/teacher/teachManager",
        },
      });
    },
    sizeChange(val) {
      this.pageInfo.pageSize = val;
      this.getPage();
    },
    currentChange(val) {
      this.pageInfo.currentPage = val;
      this.getPage();
    },
  },
  created() {},
};
</script>
<style >
</style>